<template>
  <el-card class="box">
  <el-button @click="router.go(-1)" type="danger">返回上一页</el-button>
  <el-row>
    <el-col :span="8">
      <!-- 成绩圆形图 -->
      <div class="coupon-canvas">
        <div class="progress_box">
          <canvas id="myCanvasBg" canvas-id="myCanvasBg" class="myCanvas"></canvas>
          <canvas id="myCanvas" canvas-id="myCanvas" class="myCanvas"></canvas>
          <div class="receive">
            <div class="percent">{{gradeData.type}}</div>
            <div class="percent-receive">{{gradeData.score.split("/")[0]}}</div>
            <div class="percent">/{{gradeData.score.split("/")[1]}}</div>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btnbox">
        <el-button @click="navTo(true, 0)">全部解析</el-button>
        <el-button type="primary" @click="navTo(false, 0)" v-if="error != 0">错题解析</el-button>
      </div>
    </el-col>
    <el-col :span="16" style="padding: 0 100px;">
      <!-- 选项卡 -->
      <div class="kabox">答题卡</div>
      <!-- <div class="contentbox" scroll-y>
        <text v-for="(item, index) in gradeData.grades" :key="item" @click="navTo(true, index)" :class="{numberBtn: true, trueBtn: item == 1}">{{index+1}}</text>
      </div> -->
      <el-scrollbar class="contentbox">
        <div v-for="(item, index) in gradeData.grades" :key="item" :class="{numberBtn: true, trueBtn: item == 1}" @click="navTo(true, index)">{{index+1}}</div>
      </el-scrollbar>
    </el-col>
  </el-row>
</el-card>
</template>

<script setup>
  import { getgrade } from '../../api/question.js'
  // , useRouter
  import { useRoute, useRouter } from 'vue-router'
  // import { useStore } from '../../store'
  // onBeforeUnmount,
  import { ref, onBeforeMount, nextTick } from 'vue'
  // const store = useStore()
  const route = useRoute()
  const router = useRouter()
  // const router = useRouter()
  // console.log('99999999', route.query.query)

  const gradeData = ref({
    grades: [],
    score: '',
    error: 0,
    percent: 0,
    type: ''
  })
  onBeforeMount(() => {
    gradeData.value.type = route.query.type
    // console.log(route.query)
    getgrade({
      time: route.query.time,
      type: route.query.type
    }).then(res => {
      // console.log(res)
      gradeData.value.grades = res.grades
      const str = res.score + '/' + res.total
      gradeData.value.score = str
      childrenTagName(str.split('/'))
      // console.log(store.questions)
    })
  })
      const navTo = (isAll, index) => {
        // uni.navigateTo({
        //   url: `/pages/analysis/analysis?isAll=${isAll}&n=${index}`
        // })
        router.push({
          name: 'analysis',
          query: {
            isAll,
            n: index,
            time: route.query.time,
            type: route.query.type
          }
        })
      }
      const childrenTagName = (arr) => {
        nextTick(() => {
            const score = Math.round((arr[0] - 0) * 100 / (arr[1] - 0))
            // console.log(score)
            gradeData.value.percent = score
            drawMain(score, '#D2A36C', '#fff', '#fff')
        })
      }
      const drawMain = (percent, forecolor, bgcolor, fillColor) => {
        /*
          @drawing_elem: 绘制对象
          @percent：绘制圆环百分比, 范围[0, 100]
          @forecolor: 绘制圆环的前景色，颜色代码
          @bgcolor: 绘制圆环的背景色，颜色代码
        */
        // var context = uni.createCanvasContext('myCanvasBg', this);
        const context = document.getElementById('myCanvasBg').getContext('2d')
        const centerX = 130 / 2
        const centerY = 130 / 2
        const rad = Math.PI / 3 * 5 / 100 // 绘制的为300度的圆

        // 绘制背景圆圈
        function backgroundCircle() {
          context.save()
          context.beginPath()
          context.lineWidth = 4 // 设置线宽
          const radius = centerX - 4
          context.lineCap = 'round'
          context.strokeStyle = bgcolor
          context.arc(centerX, centerY, radius, -Math.PI / 180 * 240, Math.PI / 180 * 60, false)
          context.stroke()
          // context.draw()
        }

        // 绘制运动圆环
        function foregroundCircle(n) {
          // var context = uni.createCanvasContext('myCanvas', this);
          const context = document.getElementById('myCanvas').getContext('2d')
          context.beginPath()
          context.lineWidth = 8 // 设置线宽
          const radius = centerX - 4
          context.lineCap = 'round'
          context.strokeStyle = forecolor
          context.arc(centerX, centerY, radius, -Math.PI / 180 * 240, -Math.PI / 180 * 240 + n * rad, false) // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
          context.stroke()
          // context.draw()
        }

        // 执行动画
        (function drawFrame() {
          backgroundCircle()
          foregroundCircle(gradeData.value.percent)
        }())
      }
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;

  .btnbox {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 120px;
    margin-bottom: 30px;
    button {
      width: 40%;
    }
  }
}
  .coupon-canvas {
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2vh auto;
    padding: 2vh;
    border-radius: 50%;
    background-color: #f8f8f8;
    .progress_box {
      width: 260rpx;
      height: 260rpx;
      position: relative;
      .myCanvas{
        width: 260rpx;
        height: 260rpx;
        // position: static !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-21.5%, -45%);
      }
      .receive{
        position: absolute;
        top: 50%;
        text-align: center;
        left: 50%;
        transform: translate(-50%, -50%);

        .percent-receive{
          color: #D2A36C;
          font-size: 7vh;
        }
        .percent{
          color: #8f8f8f;
          font-size: 1vh;
        }
      }
    }
  }
  .kabox {
    margin: 0 auto;
    background-color: var(--el-color-primary-light-9);
    color: #8f8f8f;
    font-size: 2.3vh;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 20px 30px;
  }
  .contentbox {
    width: 100%;
    height: 320px;
    .numberBtn {
      display: inline-block;
      border: 1px solid #000;
      border-radius: 50%;
      line-height: 50px;
      width: 50px;
      height: 50px;
      margin: 6px 10px;
      text-align: center;
      background-color: rgba(128, 0, 0, .5);
    }
    .trueBtn {
      background-color: rgba(0, 128, 0, .5);
    }
  }
</style>
